<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css" integrity="sha512-SUJFImtiT87gVCOXl3aGC00zfDl6ggYAw5+oheJvRJ8KBXZrr/TMISSdVJ5bBarbQDRC2pR5Kto3xTR0kpZInA==" crossorigin="anonymous" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>
<canvas id="canvas" width="300" height="100"></canvas>
<script>
    var ctx = document.getElementById('canvas').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie', /*图表类型为饼图*/
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], /*每一快饼图的名称*/
            datasets: [{
                label: 'pie', /*最上面图标名称，点击该图标可以隐藏或显示饼图*/
                data: [12, 19, 3, 5, 2, 3], /*饼图中每一块数据大小*/
                backgroundColor: [
                    '#FFC000',
                    '#92D050',
                    '#00B050',
                    '#00B0F0',
                    '#7030A0',
                    '#FFB27D'
                ] /*组成饼图中每一块的背景颜色，颜色格式可以为rgb格式或者十六进制格式*/
            }],
        }
    });
</script>
</body>
</html>